<template>
  <div class="detail-app">
    <!-- <h1>detail</h1> -->
    <div class="section">
      <div class="title">项目简介</div>
      <div class="contain">
        <div class="item name">
          <p>{{ project.projectName }}</p>
          <p class="cycle">({{ project.cycle }})</p>
        </div>

        <div class="item dec">{{ project.des }}</div>
        <!-- <div class="item dec">{{ test.join("") }}<span class="i">l</span></div> -->
        <div v-if="project.skills" class="item skills">
          <span></span>

          <a-tag
            v-for="(skill, index) in project.skills.split(' ')"
            :key="index"
            :color="colors[index]"
            style="margin-top: 5px"
            >{{ skill }}</a-tag
          >
        </div>
        <div
          v-if="project.address && project.address !== ''"
          class="item address"
        >
          <a-tag color="cyan"> 项目地址： </a-tag>
          <a :href="project.address">{{ project.address }}</a>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="title">项目截图</div>
      <Swiper v-if="project.imgs" :urls="project.imgs"></Swiper>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import Swiper from "@/components/Swiper.vue";
import { getProById } from "@/api/project";
import { useRouter, useRoute } from "vue-router";
export default {
  components: {
    Swiper,
  },
  async mounted() {
    await this.getById();
    this.typed();
  },
  setup() {
    const route = useRoute();
    const getById = async () => {
      const id = route.params.id;
      const result = await getProById(id);
      console.log(result);
      state.project = result.data;
    };
    const typed = () => {
      let index = 0;
      setInterval(() => {
        state.test.push(state.project.des.split("")[index]);
        index++;
      }, 300);
    };
    const state = reactive({
      colors: [
        "#f50",
        "#2db7f5",
        "#87d068",
        "#108ee9",
        "purple",
        "red",
        "purple",
        "pink",
      ],

      project: {
        // projectName: "拍卖会",
        // des:
        //   "这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊这是描述啊啊",
        // skills: "springboot mybatis-plus vue3 mysql springMvc nginx".split(" "),
        // imgs: [
        //   "@/assets/img/swiper/t1.png",
        //   "@/assets/img/swiper/t1.png",
        //   "@/assets/img/swiper/t1.png",
        //   "@/assets/img/swiper/t1.png",
        // ],
        // address: "https://gitee.com/y_project/RuoYi-Vue",
        // cycle: "(2021-1 至 2021-2)",
      },
      getById,
      test: [],
      typed,
    });

    return toRefs(state);
  },
};
</script>

<style lang="scss" scoped>
.detail-app {
  background: white;
  //   color: white;
  .section {
    height: 100%;
    margin: 0px 10px;
    border-top: 1px solid rgb(205, 205, 205);
    padding: 25px 10px;
    // height: 500px;
    .title {
      margin: 10px 10px;
      font-size: 24px;
      font-weight: 500;
    }
    .contain {
      margin: 15px 15px;
      .item {
        // color: white;
        text-align: center;
        margin: 15px 0px;
        .i {
          animation: guangbiao 1s ease-in infinite;
        }
        p {
          margin: 0;
          padding: 0;
        }
      }
      .name {
        font-size: 22px;
        font-weight: 500;
        color: black;
        // margin-left: 100px;
        .cycle {
          font-size: 12px;
          font-weight: 200;
          margin: 15px 0;
          margin-left: 10px;
        }
      }
      .dec {
        text-align: left;
        margin: 10px auto;
        line-height: 20px;
        width: 65%;
        // font-size: 12px;
        color: rgb(132, 132, 132);
      }
    }
  }
}
@keyframes guangbiao {
  0% {
    opacity: 0;
    // display: none;
  }
  100% {
    // display: inline-block;
    opacity: 1;
  }
}
</style>